<template>
  <div class="app-container">
    <!-- <el-tag>查询条件</el-tag> -->
    <div>
      <h4 style="margin:0 0 1.25rem 0">
        <el-tag type="info">查询条件</el-tag>
      </h4>
      <el-form ref="form" :model="form" label-width="6.25rem" style="display:flex;flex-wrap:wrap;">
        <el-form-item label="卡号">
          <el-input v-model="form.card_id" placeholder="请输入卡号" clearable></el-input>
        </el-form-item>
        <el-form-item label="卡类型">
          <template slot-scope="scope">
            <el-select v-model="form.card_type" clearable>
              <el-option v-for="item in cardTypeList" :key="item.dict_id" :label="item.dict_value" :value="item.dict_id" >
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="下单时间">
          <el-date-picker v-model="form.order_time" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" clearable></el-date-picker>
        </el-form-item>
        <el-form-item label="网厅订单号">
          <el-input v-model="form.ehall_order_id" placeholder="请输入网厅订单号" clearable></el-input>
        </el-form-item>
        <el-form-item label="OBU号">
          <el-input v-model="form.obu_id" placeholder="请输入OBU号" clearable></el-input>
        </el-form-item>
        <el-form-item label="订单号">
          <el-input v-model="form.order_id" placeholder="请输入订单号" clearable></el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <template slot-scope="scope">
            <el-select v-model="form.order_status" clearable>
              <el-option v-for="item in orderStatusList" :key="item.dict_id" :label="item.dict_value" :value="item.dict_id">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="付款时间">
          <el-date-picker v-model="form.pay_time" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" clearable></el-date-picker>
        </el-form-item>
        <el-form-item label="车牌号">
          <el-input v-model="form.plate_no" placeholder="请输入车牌号" clearable></el-input>
        </el-form-item>
        <el-form-item label="收件人">
          <el-input v-model="form.receiver" placeholder="请输入收件人" clearable></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.telphone" placeholder="请输入手机号" clearable></el-input>
        </el-form-item>
      </el-form>
      <div class="bfc">
        <el-button class="btn" @click="reset" type="primary">重 置</el-button>
        <el-button class="btn" @click="search" type="primary">查 询</el-button>
        <el-button class="btn" @click="exportForm" type="primary">导 出</el-button>
      </div>
    </div>
    <div>
      <h4 style="margin:0 0 1.25rem 0">
        <el-tag type="info">基本列表</el-tag>
      </h4>
      <el-table :data="baseList" border style="width: 100%" tooltip-effect="dark">
        <el-table-column type="index" :index="indexMethod"  label="序号" min-width="50">
        </el-table-column>
        <el-table-column prop="card_id" label="卡号" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="card_type" label="卡类型" min-width="80" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="create_date"  label="下单时间" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="ehall_order_id"  label="网厅订单号" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="express_no"  label="快递单号" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="obu_id"  label="OBU号" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="order_id"  label="订单号" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="order_status"  label="订单状态" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="pay_date"  label="付款时间" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="plat_id"  label="订单渠道" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="plate_no"  label="车牌号" min-width="80" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="receiver" label="收件人" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="remark" label="备注说明" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="telphone" label="手机号" min-width="100" show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination class="page-num" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="perPageNum" layout="total, sizes, prev, pager, next, jumper" :total="totalListNum">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import { getList, exportList, downloadExcel } from '@/api/orderDetailReport'
  import { queryDict } from '@/api/queryDict'
  export default {
    data() {
      return {
        cardTypeList: [],
        orderStatusList: [],
        listLoading: '',
        currentPage: 1,
        downloadUrl: '',
        baseList: [],
        perPageNum: 10,
        totalListNum: 0,
        form: {
          card_id: '',
          card_type: '',
          ehall_order_id: '',
          obu_id: '',
          order_id: '',
          order_status: '',
          plate_no: '',
          receiver: '',
          telphone: ''
        },
        cardTypeOptions: [{
          value: '1',
          label: '记账卡'
        }, {
          value: '2',
          label: '储值卡'
        }],
        orderStatusOptions: [{
          value: '1',
          label: '审核通过'
        }, {
          value: '2',
          label: '未审核'
        }]
      }
    },
    created() {
      this.queryCardType()
      this.queryOrderStatus()
      this.fetchData()
    },
    methods: {
      formatPlatId(row, column) {
        return row.plat_id === '1' ? '支付宝' : row.plat_id === '2' ? '微信' : '未知'
      },
      queryCardType() {
        const params = {
          'group_id': 'CARD_TYPE',
          'status': '1'
        }
        queryDict(params).then(res => {
          this.cardTypeList = res.data ? res.data : []
        }).catch(er => { })
      },
      queryOrderStatus() {
        const params = {
          'group_id': 'LTK_ORDER_STATUS',
          'status': '1'
        }
        queryDict(params).then(res => {
          this.orderStatusList = res.data ? res.data : []
        }).catch(er => { })
      },
      reset() {
        this.form = {}
        this.currentPage = 1
        this.perPageNum = 10
        this.fetchData()
      },
      praseDate(date) {
        const year = date.getFullYear()
        const month = date.getMonth() + 1
        const day = date.getDate()
        return year + '-' + month + '-' + day
      },
      search() {
        this.currentPage = 1
        this.fetchData()
      },
      exportForm() {
        const params = {
          'card_id': this.form.card_id,
          'card_type': this.form.card_type,
          'create_date_start': this.form.order_time === undefined ? '':this.form.order_time === null ? '':this.form.order_time[0] === '' ? '' : this.praseDate(this.form.order_time[0]),
          'create_date_end': this.form.order_time === undefined ? '':this.form.order_time === null ? '':this.form.order_time[1] === '' ? '' : this.praseDate(this.form.order_time[1]),
          'ehall_order_id': this.form.ehall_order_id,
          'obu_id': this.form.obu_id,
          'order_id': this.form.order_id,
          'order_status': this.form.order_status,
          'pay_date_start': this.form.pay_time === undefined ? '':this.form.pay_time === null ? '':this.form.pay_time[0] === '' ? '' : this.praseDate(this.form.pay_time[0]),
          'pay_date_end': this.form.pay_time === undefined ? '':this.form.pay_time === null ? '':this.form.pay_time[1] === '' ? '' : this.praseDate(this.form.pay_time[1]),
          'plate_no': this.form.plate_no,
          'receiver': this.form.receiver,
          'telphone': this.form.telphone
        }
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.7)'
        })
        exportList(params).then(res => {
          const data = res.data
          if(data === null){
            this.$message.error(res.message)
          } else {
            this.downloadUrl = data.download_url
            window.location.href = this.downloadUrl
          }
        }).catch(er => {
          this.$message.error('导出失败，请重试！')
        })
        loading.close()
      },
      indexMethod(index) {
        return index + (this.currentPage - 1) * this.perPageNum + 1
      },
      handleSizeChange(val) {
        this.perPageNum = val
        this.currentPage = 1
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.fetchData()
      },
      fetchData() {
        const params = {
          'page': this.currentPage,
          'per_num': this.perPageNum,
          'card_id': this.form.card_id,
          'card_type': this.form.card_type,
          'create_date_start': this.form.order_time === undefined ? '':this.form.order_time === null ? '':this.form.order_time[0] === '' ? '' : this.praseDate(this.form.order_time[0]),
          'create_date_end': this.form.order_time === undefined ? '':this.form.order_time === null ? '': this.form.order_time[1] === '' ? '' : this.praseDate(this.form.order_time[1]),
          'ehall_order_id': this.form.ehall_order_id,
          'obu_id': this.form.obu_id,
          'order_id': this.form.order_id,
          'order_status': this.form.order_status,
          'pay_date_start': this.form.pay_time === undefined ? '':this.form.pay_time === null ? '':this.form.pay_time[0] === '' ? '' : this.praseDate(this.form.pay_time[0]),
          'pay_date_end': this.form.pay_time === undefined ? '':this.form.pay_time === null ? '':this.form.pay_time[1] === '' ? '' : this.praseDate(this.form.pay_time[1]),
          'plate_no': this.form.plate_no,
          'receiver': this.form.receiver,
          'telphone': this.form.telphone
        }
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.7)'
        })
        getList(params).then(res => {
          const data = res.data
          this.baseList = data ? data.result_list : null
          this.totalListNum = data ? data.total : 0
        }).catch(er => { })
        loading.close()
      }
    }
  }
</script>

<style  lang="scss" scoped>
  .page-num {
    float: right;
  }
  .pw22 {
    width: 22%;
  }
  .btn {
    float: right;
    margin: 0 0.9rem;
  }
  .ml20 {
    margin-left: 1.25rem;
  }
  .bfc {
    overflow: hidden;
  }
  .flex {
    display: flex;
    display: -webkit-flex;
    align-items: center;
  }

  .aic {
    align-items: center;
  }
  .jcsa {
    justify-content: flex-start;
  }

</style>
